<?php  	 ?> 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>流量使用信息</title>
	<script type="text/javascript" src="/resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="/resource/js/highcharts.js"></script>
	<script type="text/javascript" src="/resource/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="/resource/js/contr.js"></script>
<style type="text/css">
	.charts{width: 1200px;height: 400px;margin-left: auto;margin-right: auto; margin-top: 30px}
	.date{ width: 1200px;margin:0 auto;}
	.suss{margin-top: 150px;float: right;margin-right: 100px }

				/*----------用来移除叉叉按钮----------*/
			input[type="date"]::-webkit-clear-button{
			   display:none;
			}

		::-webkit-datetime-edit { padding: 3px; background: url(/study/image/selection.gif); }
		::-webkit-datetime-edit-fields-wrapper { background-color: #eee; }
		::-webkit-datetime-edit-text { color: #4D90FE; padding: 0 .2em; }
		::-webkit-datetime-edit-year-field { color: purple; }
		::-webkit-datetime-edit-month-field { color: blue; }
		::-webkit-datetime-edit-day-field { color: green; }
		::-webkit-inner-spin-button { visibility: hidden; }
		::-webkit-calendar-picker-indicator {
	    border: 1px solid #ccc;
	    border-radius: 2px;
	    box-shadow: inset 0 1px #fff, 0 1px #eee;
	    background-color: #eee;
	    background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
	    color: #666;
	}
	 .list1 ul{
            overflow: hidden;
            width: 200px;
            height: 20px;
            float: left;
            margin-top: 150px;
        }
        .list1 li{
            float: left;
            list-style-type: none;
        }
        .list1 a{
            display: block;
            padding: 0 16px;
            text-decoration: none;
            color: #999;
        }
        .list1 li+li a{
            border-left: 1px solid #aaa;
        }
        .list1 a:hover{
            color: #555;
        }

</style>
</head>
<body>
	
	<div class="date">
		 <nav class="list1" id="nav">
        <ul>
            <li><a href="?c=user&m=mouthData" id="thismouth">本月流量</a></li>
            <li><a href="javascript:void(0)" id="thisday">今日流量</a></li>

        </ul>
        <ul id="total">今日总流量:<?php echo $daytotal; ?></ul>
        
    </nav>
    
	 <div class="suss"> <span style="margin: 0 5px 0 0">开始时间:</span><input  type="date" name="start" id="indate"><span style="margin: 0 5px 0 5px" >结束时间:</span><input  type="date" name="end" id="endate"><input style="margin-left:5px" type="button" id="check" name="check" value="查询"></div>
	</div>
	<div id="container" class="charts">
	<div id="container2" class="charts">
	<pre id="data" style="display: none;" >
	
		<?php  echo $str;	 ?> 

	
</pre>
</body>
<script type="text/javascript">
	$(document).ready(function() {

	
 	var ddd = new Date();
	var day =ddd.getDate();

	if(ddd.getMonth()<10){
	var month = "0"+(ddd.getMonth()+1); 
	}

	if(ddd.getDate()<10){
	 day = "0"+ddd.getDate(); 
	}

	var datew = ddd.getFullYear()+"-"+month+"-"+day;
	var datew = datew.toString();

	 $("[name=start]").val(datew);
	 $("[name=end]").val(datew);
	
		
	  $("#indate").change(function(){
	   $("#indate").attr("value",$(this).val()); //赋值
	   	date = $("#indate").val();
	   	  
	});

   var options = {
   	 title: {
        text: '今日流量图'
    },
	
    yAxis: [{
        title: {
            text: '流量'
        },
		
     labels: {     
        formatter: function(){
       		if(this.value>1024){
       			return  Math.round(this.value/1024)+"GB";
       		}else if(this.value>1024*1024){
       			return  Math.round(this.value/1024)+"TB";
       		}else{
       			return  this.value+"MB";
       		}      			
       		}
       }
    }],
	 xAxis: {
           
            
        },
    credits: {
     enabled: false
	},
    legend: {
        layout: 'line',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            showInLegend: true,			
			events: {
				legendItemClick:function(event){ 
					return false
					}
			}			 		
            }
    },
   	chart: {
        renderTo: 'container',
	        type: 'spline',
			 marginBottom: 80,
	},
	series: [{
				name:'每小时下载流量',
			},
			{
			
			},
			                  
		],
	};
	
	
	 var jsonStr = $('#data').html();
    jsonData = JSON.parse(jsonStr);
	
	options.series[0].data =  jsonData;
	options.series[0].name='每小时下载流量';
	var chart = new Highcharts.Chart('container', options);
	 	




 $("#thisday").click(function(){
 	//title = chart.title.textStr;
 	var title = {
    text:"今日流量",  
	};
 	chart.setTitle(title);

 	$.ajax({
			"url":"?c=user&m=charts",
			"dataType":"json",
			"data":{"day":datew},
			"type":"post",
			success:function(re){
			if(re.code=='0'){	
				 jsonData = JSON.parse(re.info.str);
				 chart.series[0].setData(jsonData);  
				 	var series = chart.series[1];
					if (series.visible) {
						series.hide();
					}
					chart.series[0].show();
				  $("#total").text("当日总流量:"+re.info.daycount);   
				
			}else{
				alert('获取数据失败!');
			}
		}
		});
 });
 /**
 *查询指定时间数据
 */
 $("#check").click(function(){
	 
		var start = $("[name=start]").val();
		var end = $("[name=end]").val();
		var starttime = Date.parse(new Date(start+' 00:00:00'));
		var	endtime = Date.parse(new Date(end+' 00:00:00'));
		var title = {
		text:start+'日-'+end+"日流量",
		
		};
		chart.setTitle(title);
		if(starttime>endtime){
			alert('开始时间不能晚于结束时间');
			return false;
		}
		
		
		$.ajax({
		"url":"?c=user&m=selectData",
		"dataType":"json",
		"data":{"starttime":start,"endtime":end},
		"type":"post",
		success:function(re){
			if(re.code=='0'){	
			
			jsonData = JSON.parse(re.data.y);
				 chart.series[1].setData(jsonData); 
				 xdata = JSON.parse(re.data.x);		
				chart.xAxis[0].setCategories(xdata); 			
				  var series = chart.series[0];
					if (series.visible) {
						series.hide();
					}
					chart.series[1].show(); 
					$("#total").text('总流量:'+re.total);
			}else{
				alert('选择日期有误!');
			}
		}
		});
		
	 });

});

</script>
</html>